<template>
  <div class="orderDetails">
    <loading :state="loading"/>
    <popup :pupData="pupData" @sureFun="sureFun" @cancelFun="cancelFun" ref="popupref"/>
    <div class="head-waitPay" v-if="head==='waitPay'">
      <h1 v-if="stateTime">订单还有&nbsp;<span>{{demoTime}}秒</span>&nbsp;失效</h1>
      <h1 v-else>{{stateText}}</h1>
    </div>
    <div class="head-pay" v-else-if="head==='pay'">
      <h1>等待商家接单</h1>
      <p>配送方式：商家配送</p>
    </div>
    <!--<div class="head" v-else>-->
    <!--<h1>小票单号:454641613</h1>-->
    <!--<div class="head-bt">-->
    <!--<p>配送员：某某某</p>-->
    <!--<p>手机号：1870000000</p>-->
    <!--</div>-->
    <!--</div>-->
    <div class="address">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-gwc_dw"></use>
      </svg>
      <div class="add-r">
        <div class="name">
          <h1>{{address.name}}</h1>
          <p class="phone">{{address.phone}}</p>
        </div>
        <p class="position">
          {{address.province}}{{address.city}}{{address.area}}{{address.detail}} </p>
      </div>
    </div>
    <div class="area">
      <item-order-detail v-for="(item, index) in goodsInfo" :key="index" :goodsArea="item"/>
    </div>
    <div class="mark">
      <p>备注：{{dataLocal.remark}}</p>
    </div>
    <div class="mark">
      <p>订单号:{{dataLocal.id}}</p>
    </div>
    <div class="orderInfo">
      <p>下单时间：{{timeCreated}}</p>
    </div>
    <div class="total">
      <h1>商品总金额：<span>￥{{dataLocal.money}}</span></h1>
    </div>
    <orderFooter v-if="frontState" :status=status @handleCommit="handleCommit"/>
  </div>
</template>

<script type="text/ecmascript-6">
  import ItemOrderDetail from '../../components/order/itemOrderDetail';
  import OrderTextArea from '../../components/order/orderTextArea';
  import orderFooter from '../../components/order/orderFooter';
  import OrderType from '../../pages/order/OrderType';
  import Moment from 'moment';

  export default {
    name: 'order-details',
    created() {
      this.getData();
    },
    data() {
      return {
        loading: false,
        stateTime: true,
        demoTime: 0,
        stateText: '',
        pupNum: 1,
        pupData: {
          des: '确认',
          cancel: '取消',
          sure: '确定'
        }, // 弹窗提示文字
        status: this.$route.query.status, // 追踪订单状态
        id: this.$route.query.id, // 订单id
        dataLocal: {remark: ''}, // 订单详情数据
        address: {
          name: '',
          phone: '',
          province: '',
          city: '',
          area: '',
          detail: ''
        }, // 地址
        goodsInfo: [],
        receiveState: false, // 订单是否已签收
        frontState: true // 订单是否已过期
      };
    },
    components: {
      OrderTextArea,
      ItemOrderDetail,
      orderFooter
    },
    computed: {
      head() {
        // 控制头部显示样式
        if (this.status === OrderType.waitPay) {
          // 待付款
          return 'waitPay';
        } else if (this.status === OrderType.waitReceipt || this.status === OrderType.waitReceipt2) {
          // 待接单
          return 'pay';
        } else {
          // 其他
          return 'other';
        }
      },
      timeCreated() {
        //  创建时间
        return this.dateFormat(new Date(this.dataLocal.created * 1000));
      }
    },
    methods: {
      dateFormat(val) {
        return Moment(val).format('YYYY-MM-DD HH:mm:ss');
      },
      getData() {
        //  获取订单详情
        this.loading = true;
        this.$Spread.getNewUserOrderDetail({id: this.id}).then(res => {
          this.dataLocal = res.data;
          this.address = this.dataLocal.address;
          this.goodsInfo = this.dataLocal.list;
          this.demoTime = this.dataLocal.leftTime;
          this.timeState();
          this.loading = false;
        }, () => {
          this.loading = false;
        });
      },
      // todo 返回到之前的tab
      // 弹出框取消
      cancelFun() {
        this.$refs.popupref.switchState();
      },
      // 弹出框提示
      sureFun() {
        if (this.pupNum === 1) {
          // 调用取消订单
          this.cancelOrderIn();
        } else if (this.pupNum === 2) {
          this.confirmPayIn();
        } else if (this.pupNum === 3) {
          this.confirmReceiveIn();
        }
        this.$refs.popupref.switchState();
      },
      handleCommit(method) {
        switch (method) {
          case 'confirmPay':
            this.confirmPay();
            break;
          case 'cancelOrder':
            this.cancelOrder();
            break;
          case 'confirmReceive':
            this.confirmReceive();
            break;
          case 'confirmComment':
            this.confirmComment();
            break;
        }
      },
      confirmPay() {
        // 确认付款
        this.pupNum = 2;
        this.pupData.des = '您确定支付该订单吗?';
        this.$refs.popupref.switchState();
      },
      confirmPayIn() {
        // 去付款In  /order/api/order/pay
        this.loading = true;
        this.$Spread.NewUserOrderPay({id: this.id}).then(res => {
          this.loading = false;
          let data = {
            targetType: res.data.targetType,
            targetId: res.data.targetId,
            money: res.data.money,
            consigneeStyle: res.data.tips.key,
            consigneeName: res.data.tips.value
          };
          this.$router.push({
            name: 'pay-option',
            query: data
          });
        }, () => {
          this.loading = false;
          this.$toast('取消订单失败！');
        });
      },
      cancelOrder() {
        // 取消订单
        this.pupNum = 1;
        this.pupData.des = '您确定取消该订单吗?';
        this.$refs.popupref.switchState();
      },
      cancelOrderIn() {
        this.loading = true;
        this.$Spread.NewUserOrderCancel({id: this.id}).then(res => {
          this.loading = false;
          if (res.msg) {
            this.$toast(res.msg);
          } else {
            this.$toast('您已成功取消该订单！');
          }
          this.$router.push({
            name: 'orderList'
          });
        }, () => {
          this.loading = false;
          this.$toast('取消订单失败！');
        });
      },
      confirmReceive() {
        // 确认收货
        if (this.receiveState === true) {
          this.$toast('订单已签收');
          this.$router.push({
            name: 'orderList'
          });
        } else {
          this.pupNum = 3;
          this.pupData.des = '您确定签收该订单吗?';
          this.$refs.popupref.switchState();
        }
      },
      confirmReceiveIn() {
        // 确认收货执行方法
        this.loading = true;
        this.$Spread.NewUserOrderCollect({id: this.id}).then(res => {
          this.loading = false;
          this.$toast('您已成功签收该订单！');
          this.receiveState = true;
        }, () => {
          this.$toast('签收订单失败！');
          this.loading = false;
        });
      },
      confirmComment() {
        // 立即评价
        console.log(this.dataLocal.isComment, 'idddddddddd');
        if (this.dataLocal.isComment) {
          this.$toast('订单已评价！');
        } else {
          this.$router.push({
            name: 'order-comment',
            query: {id: this.id}
          });
        }
      },
      noStateTo() {
        //  不做处理直接跳转详情
        this.$router.push({
          name: 'orderList'
        });
      },
      timeState() {
        // 是否可以取消订单
        console.log(this.dataLocal.leftTime, 'this.dataLocal.leftTime');
        if (this.dataLocal.leftTime !== undefined) {
          if (this.dataLocal.leftTime > 0) {
            let self = this;
            this.stateTime = true;
            let secondChange = function secondChange() {
              self.demoTime--;
              if (self.demoTime === 0) {
                self.stateTime = false;
                self.stateText = '订单已失效';
                self.frontState = false;
              }
            };
            setInterval(secondChange, 1000);
          } else {
            this.stateTime = false;
            this.stateText = '订单已失效';
            this.frontState = false;
          }
        }
      }
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .icon {
    width: 4vw
    height: 4vw
    fill: third-ash
    margin-right 2vw
  }

  .rect {
    width: 96vw
    margin 10px auto
    padding 3vw 4vw
    box-sizing border-box
    background white
    border-radius(5px)
  }

  .orderDetails {
    padding-bottom 100px
    .head-pay {
      @extend .rect
      height: 12vw
      flex-x()
      h1 {
        word-vw(16, main-color)
      }
      p {
        word-vw(14, first-ash)
      }
    }
    .head-waitPay {
      @extend .rect
      height: 12vw
      flex-x()
      h1 {
        word-vw(16, second-ash)
        span {
          word-vw(16, main-color)
        }
      }
    }
    .head {
      @extend .rect
      h1 {
        word-vw(16, main-color)
        margin-bottom 10px
      }
      .head-bt {
        flex-x(flex-start)
        p {
          word-vw(14, second-ash)
          margin-right 3vw
        }
      }
    }
    .address {
      @extend .rect
      flex-x(flex-start, flex-start)
      .add-r {
        .name {
          flex-x();
        }
        .position {
          word-vw(14, third-ash)
          margin-top 2vw
          line-height 1.5
        }
      }
    }
    .mark {
      @extend .rect
      padding 4vw 2vw
      p {
        word-vw(14, third-ash)
      }
    }
    .orderInfo {
      width: 96vw;
      margin: 0 auto;
      p {
        word-vw(14, third-ash)
        line-height 1.5
      }
    }
    .total {
      flex-x(flex-end);
      margin-top 10px
      h1 {
        word-vw(14, first-ash)
        margin-right 3vw
        span {
          word-vw(14, main-color)
        }
      }
    }
  }
</style>
